<template>
	<view class="recharge-container">
		<!-- 余额显示区域 -->
		<view class="balance-section">
			<text class="balance-amount">{{ selectedAmount }}</text>
			<text class="balance-unit">元</text>
		</view>

		<view class="flex ai-c jc-c"
			style="font-size: 24rpx;width: 100%;text-align: center;padding-bottom: 8rpx;margin-bottom: 40rpx;border-bottom: 1px solid #f2f2f2;">
			<image src="/static/zuoxianxan.png" mode="aspectFit" style="height: 18rpx;"></image>
			<text style="font-size: 24rpx;width: 100%;text-align: center;color: #7E7E7E;">充 值</text>
			<image src="/static/youxianxain.png" mode="aspectFit" style="height: 18rpx;"></image>
		</view>
		<!-- 金额选择网格 -->
		<view class="amount-grid">
			<view v-for="(amount, index) in amounts" :key="index"
				:class="['amount-item', { 'selected': selectedAmount === amount.value }]"
				@click="selectAmount(amount.value)">
				<text class="amount-text">¥ {{ amount.value }}</text>
			</view>
		</view>

		<!-- 充值按钮 -->
		<view class="recharge-button" @click="handleRecharge">
			<text class="recharge-text">¥ {{ selectedAmount }} 立即充值</text>
		</view>

		<!-- 我的账单 -->

		<view class="my-bill-item-text">我的账单</view>

	</view>
</template>

<script setup>
import { ref } from 'vue'

// 响应式数据
const amounts = ref([
	{ value: 3 },
	{ value: 12 },
	{ value: 48 },
	{ value: 128 },
	{ value: 328 },
	{ value: 648 }
])

const selectedAmount = ref(328)

// 方法
const selectAmount = (amount) => {
	selectedAmount.value = amount
}

const handleRecharge = () => {
	uni.showToast({
		title: `充值 ¥${selectedAmount.value}`,
		icon: 'none'
	})
}
</script>

<style scoped>
.recharge-container {
	background-color: #F7F7F7;
	min-height: 100vh;
	padding: 40rpx 30rpx;
	display: flex;
	flex-direction: column;
	align-items: center;
	box-sizing: border-box;
}

.balance-section {
	text-align: center;
	margin-bottom: 180rpx;
	margin-top: 180rpx;
}

.balance-amount {
	display: block;
	font-size: 104rpx;
	color: #333;
	font-weight: bold;
	line-height: 1;
}

.balance-unit {
	display: block;
	font-size: 24rpx;
	color: #333;
	margin-top: 10rpx;
}

.amount-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20rpx;
	width: 100%;
	margin-bottom: 80rpx;
}

.amount-item {
	background-color: #ffffff;
	box-shadow: 0px 4px 32px 0px rgba(0, 0, 0, 0.06);
	border-radius: 20rpx;
	height: 120rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 2px solid transparent;
	transition: all 0.3s ease;
}

.amount-item.selected {
	border-color: #0F50DC;
}

.amount-text {
	font-size: 34rpx;
	color: #000;
	font-weight: 700;
}

.recharge-button {
	margin-top: 100rpx;
	background-color: #0F50DC;
	border-radius: 80rpx;
	height: 100rpx;
	width: 60%;
	display: flex;
	align-items: center;
	justify-content: center;
}

.recharge-text {
	color: #ffffff;
	font-size: 36rpx;
	font-weight: 600;
}

.my-bill-item-text {
	text-align: center;
	margin-top: 70rpx;
	font-size: 28rpx;
	color: #9F9F9F;
	text-decoration: underline;
}
</style>
